<template>
    <div class="app-main" id="app-main">
        <p class="activeImg">
            <img src="../../../assets/image/inviteFriends/sharebg.png"/>
        </p>
        <div id="dialog-wrap" class="dialog-wrap">
            <div class="regist-dialog" id="regist-dialog">
                <p class="slogan">
                    Hi，我的爱车在车享家做保养<br/>
                    推荐你也来！
                </p>
                <p class="regist-info">
                    <input id="mobile" type="tel" v-model="mobile" maxlength="11" placeholder="填写手机号领取礼包">
                    <input id="authCode" type="text" v-model="captcha" placeholder="短信验证码">
                    <!-- <button id="getAuthCode" @click="getCode">获取验证码</button> -->
                    <span id="getAuthCode" v-on:click="getAuthCode">
                        <timer-btn class="btn btn-default" :second="60" :btntext="btntext" ref="timerBtn"></timer-btn>
                    </span>
                </p>
                <p class="regist-submit">
                    <button id="regist" v-on:click="quickRegist" ca="'推荐有礼_车享家258元大礼包$'+ text">{{text}}</button>
                </p>
            </div>

            <!--giftList-dialog-->
            <div class="giftList-dialog" id="giftList-dialog">
                <h1 class="title">领取成功</h1>
                <div class="content">
                    <ul>
                        <!--<li><span>100元保养券-app专享</span><span><i>￥</i>200</span></li>-->
                        <li v-for="coupon in coupons">
                            <span>{{coupon.activityName}}</span><span><i>￥</i>{{coupon.faceValue}}</span>
                        </li>
                    </ul>
                </div>
                <p class="btn-wrap">
                    <a v-bind:href="downloadUrl" class="usecoupon-btn" ca="推荐有礼_车享家258元大礼包$立即使用">立即使用</a>
                </p>
            </div>
        </div>
        <div class="logo"></div>
        <div class="alert" id="alert">
            <p class="content">{{alertContent}}</p>
            <span class="btn" v-on:click="alertHide" ca="推荐有礼_车享家258元大礼包$确定">确定</span>
        </div>
    </div>
</template>
<style lang="scss">
    @import '../../../assets/css/common.scss';

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        font-family: PingFang-Medium, PingFangSC-Regular, Helvetica;
        color: #cccccc;
        font-size: .7rem;
    }

    .bottomfix {
        position: fixed;
        bottom: 0;
        width: 100%;
        max-width: 750px;
        z-index: 333;
    }

    /*大图提前加载*/
    body:after {
        content: url("../../../assets/image/inviteFriends/loading.gif");
        display: none;
    }

    /*活动*/
    body {
        background-color: #fff;
    }

    .app-main {
        position: relative;
        height: auto;
    }

    .app-main img {
        width: 100%;
    }

    .app-main .dialog-wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .app-main .dialog-wrap .regist-dialog {
        padding: 13.5rem 0 0 0;
        /*background-color: #fff;*/
        background: url("../../../assets/image/inviteFriends/activeSlogan.png") center top no-repeat;
        background-size: 100% auto;
        /*border-radius: .2rem;*/
        /*box-shadow: 0 .35rem .5rem 0 rgba(0, 0, 0, .2);*/
        width: 86%;
        position: absolute;
        left: 7%;
        top: 2rem;
    }

    .app-main .dialog-wrap .regist-dialog .slogan {
        font-size: .7rem;
        text-align: center;
        position: absolute;
        left: 0;
        top: 20%;
        width: 100%;
    }

    .app-main .dialog-wrap .regist-dialog .regist-info {
        padding: .8rem 10%;
        background: url("../../../assets/image/inviteFriends/regist-bg-1.png") center top no-repeat;
        background-size: 100% auto;
        height: 6rem;
    }

    .app-main .dialog-wrap .regist-dialog .regist-info input {
        padding: 0 .5rem;
        background-color: #fff;
        border: 0;
        border-radius: .25rem;
        line-height: 1.8rem;
        font-size: .7rem;
        color: #d6af88;
        height: 1.8rem;
    }

    .app-main .dialog-wrap .regist-dialog .regist-info input[type=tel] {
        margin-bottom: .5rem;
        width: 100%;
    }

    .app-main .dialog-wrap .regist-dialog .regist-info input[type=text] {
        width: 55%;
        float: left;
    }

    .app-main .dialog-wrap .regist-dialog .regist-info span {
        float: right;
        width: 40%;
        height: 1.8rem;
    }

    .app-main .dialog-wrap .regist-dialog .regist-info span button {
        background-color: #4a90e2;
        border-radius: .25rem;
        line-height: 1.8rem;
        font-size: .7rem;
        color: #fff;
        width: 100%;
        height: 100%;
        /*height: 1.8rem;
        float: right;*/
    }

    .app-main .dialog-wrap .regist-dialog .regist-submit {
        padding: 1rem 10%;
        background: url("../../../assets/image/inviteFriends/regist-bg-2.png") center top no-repeat;
        background-size: 100% auto;
        height: 4rem;
    }

    .app-main .dialog-wrap .regist-dialog .regist-submit button {
        background: #fe3939;
        box-shadow: inset 0 -.15rem 0 0 rgba(0, 0, 0, .2);
        border-radius: .25rem;
        font-size: .8rem;
        line-height: 2rem;
        color: #fff;
        text-align: center;
        height: 2rem;
        width: 100%;
        display: block;
    }

    /*giftlist-dialog*/
    .app-main .dialog-wrap .giftList-dialog {
        padding: 1.5rem 0 0 0;
        /*background-color: #fff;
        border-radius: .2rem;
        box-shadow: 0 .35rem .5rem 0 rgba(0, 0, 0, .2);*/
        width: 84%;
        position: absolute;
        left: 8%;
        top: 2rem;
        display: none;
    }

    .app-main .dialog-wrap .giftList-dialog h1 {
        font-size: 1.8rem;
        text-align: center;
        color: #fff;
    }

    /*.app-main .dialog-wrap .giftList-dialog .title span {
        padding: 0 .3rem;
        color: #d0021b;
        display: inline-block;
    }*/

    .app-main .dialog-wrap .giftList-dialog .content {
        padding-top: 1rem;
        /*font-size: .8rem;
        color: #8392a0;
        line-height: 1.7;*/
    }

    .app-main .dialog-wrap .giftList-dialog .content ul {
        border-radius: .25rem;
    }

    .app-main .dialog-wrap .giftList-dialog .content ul > li {
        padding: .5rem 0;
        /*display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;*/
        display: table;
        width: 100%;
    }

    .app-main .dialog-wrap .giftList-dialog .content ul > li:after,
    .app-main .dialog-wrap .giftList-dialog .content ul > li:before {
      content: '';
      display: table;
      clear: both;
    }

    .app-main .dialog-wrap .giftList-dialog .content ul > li:first-child {
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        -webkit-border-bottom-left-radius: .25rem;
        -webkit-border-bottom-right-radius: .25rem;
    }

    .app-main .dialog-wrap .giftList-dialog .content ul > li:last-child {
        border-bottom-left-radius: .8rem;
        border-bottom-right-radius: .8rem;
        -webkit-border-bottom-left-radius: .8rem;
        -webkit-border-bottom-right-radius: .8rem;
    }

    .app-main .dialog-wrap .giftList-dialog .content ul > li:nth-of-type(odd) {
        padding: .5rem 1rem;
        min-height: 3.25rem;
        background: url("../../../assets/image/inviteFriends/coupon-bg1.png") center top no-repeat;
        background-size: 100% 100%;
    }

    .app-main .dialog-wrap .giftList-dialog .content ul > li:nth-of-type(even) {
        padding: .625rem 1rem;
        min-height: 3.5rem;
        background: url("../../../assets/image/inviteFriends/coupon-bg2.png") center top no-repeat;
        background-size: 100% 100%;
    }

    .app-main .dialog-wrap .giftList-dialog .content ul > li > span {
        /*height: 2.25rem;*/
        display: table-cell;
        line-height: 1.5;
        text-align: center;
        vertical-align: middle;
        height: 100%;
    }

    .app-main .dialog-wrap .giftList-dialog .content ul > li > span:nth-of-type(1) {
        padding-right: 1rem;
        color: #243742;
        font-size: .7rem;
        width: 68%;
        /*float: left;*/
    }

    .app-main .dialog-wrap .giftList-dialog .content ul > li > span:nth-of-type(2) {
        border-left: 1px #999 dashed;
        color: #ff450a;
        font-size: 1rem;
        width: 30%;
        /*float: right;*/
    }

    .app-main .dialog-wrap .giftList-dialog .content ul > li > span:nth-of-type(2) i {
        font-size: .6rem;
    }

    .app-main .dialog-wrap .giftList-dialog .btn-wrap {
        margin-top: 1rem;
    }

    .app-main .dialog-wrap .giftList-dialog .btn-wrap a {
        text-align: center;
        display: block;
    }

    .app-main .dialog-wrap .giftList-dialog .usecoupon-btn {
        background: #fe3939;
        box-shadow: inset 0 -.15rem 0 0 rgba(0, 0, 0, .2);
        border-radius: .25rem;
        font-size: .85rem;
        color: #fff;
        line-height: 2.2rem;
        height: 2.2rem;
    }

    .app-main .logo {
        background: url("../../../assets/image/inviteFriends/logo.png") center no-repeat;
        background-size: auto 100%;
        position: absolute;
        left: 0;
        bottom: 1rem;
        width: 100%;
        height: 1.5rem;
    }
    .alert {
      padding: 1rem 0;
      border-radius: .3rem;
      background-color: #fff;
      color: #333;
      position: fixed;
      left: 10%;
      top: 20%;
      width: 80%;
      display: none;
      z-index: 1000;
    }
    .alert p.content {
      padding: 0 1rem 1rem;
      min-height: 3rem;
      line-height: 1.5;
      font-size: .8rem;
    }
    .alert span.btn{
      padding-top: 1rem;
      display: block;
      text-align: center;
      border-top: 1px solid #03a9f4;
      line-height: 1;
    }
    .mask {
      background-color: rgba(0,0,0,.4);
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 200%;
      z-index: 999;
      display: none;
    }
</style>
<script>
    import Vue from 'vue';
    import timerBtn from '../../common/timeBtn';
    import common from "../../../assets/js/common.js";

    export default {
        data: function () {
            return {
                send: 'send',
                mobile: '',  //获取验证码的手机号
                captcha: '',  //验证码
                tempCaptcha:'',
                shareUid: '',
                shareMobile: '',
                text: '点击领取',
                btntext: '获取验证码',
                message: '',
                coupons: [],
                alertContent: '',
                clientHeight: '',
                rootFontsize:'',
                downloadUrl:''
            }
        },
        components: {timerBtn},
        methods: {
            windowOnload: function(){
                this.clientHeight = document.documentElement.clientHeight;
                var _root = document.querySelector('html');
                this.rootFontsize = _root.style.fontSize;
            },
            windowResize: function () {  //监听window.onresize,在屏幕尺寸改变时设置body高度,root字体,解决部分安卓手机键盘遮挡问题
                var _this = this;
                var _root = document.querySelector('html');
                var _body = document.querySelector('body');
                var _el = document.getElementById('app-main');
                var _style = 'position:absolute,height:' + _this.clientHeight + ';width:100%;';
                window.onresize = function () {
                    var _height = document.documentElement.clientHeight;
                    _root.style.fontSize = _this.rootFontsize;
                    if (_height < _this.clientHeight){
                        _body.setAttribute('style',_style);
                        _el.setAttribute('style','height:' + _this.clientHeight + ';');
                    } else {
                        _body.removeAttribute('style');
                        _el.removeAttribute('height');
                    }
                };
            },
            getShareInfo: function () {  //获取分享活动的用户UID
              var _shareUid = window.location.search, _shareMobile = window.location.search, m, n;
                m= _shareUid.indexOf('&shareMobile');
                n = _shareUid.indexOf('&from');
                /*_shareUid = _shareUid.substring(0,m).replace(/^\?shareUid=/g, '');*/
                _shareUid = _shareUid.substring(0,n).replace(/^\?shareUid=/g, '');
                this.shareUid = _shareUid;
                /*_shareMobile = _shareMobile.substring(m,n).replace(/^&shareMobile=/g,'');
                this.shareMobile = _shareMobile;*/
                window.location.href =  "https://" + window.location.host + "/cx/cxj/cxjweb/invitefriends2/share/invitefriends2-share.shtml" + "?shareUid=" + this.shareUid;
            },
            getAuthCode: function () { //获取短信验证码
                var mobileRegx = /^1[3|4|5|7|8][0-9]{9}$/;
                var _mobile = this.mobile;
                var maskEl = document.getElementById('mask'),
                    alertEl = document.getElementById('alert'),
                    mobileEl = document.getElementById('mobile');
                if (!mobileRegx.test(_mobile)) {
                    this.alertContent = '手机号格式有误或为空';
                    alertEl.setAttribute('style','display:block;');
                    maskEl.setAttribute('style','display:block;');
                } else {
                    this.$http.post(common.isdev() + '/guide/sendSmsCode/0.htm', {'mobile': _mobile}).then(function (response) {
                      // success callback
                        console.info('getAuthCode true');
                        var someData = response.data;
                        if(someData.result == 0) {
                            this.alertContent = someData.msg;
                            alertEl.setAttribute('style','display:block;');
                            maskEl.setAttribute('style','display:block;');
                        } else {
                            this.$refs.timerBtn.send();
                            //mobileEl.setAttribute('readonly','readonly');
                            //锁定INPUT输入框
                        }
                    }, function (response) {
                        console.info('getAuthCode false');
                    });

                }
            },
            quickRegist: function () {  //快速注册
                var mobile = this.mobile, captcha = this.captcha, userId = this.shareUid;
                var registEl = document.getElementById('regist-dialog'),
                    giftListEl = document.getElementById('giftList-dialog'),
                    maskEl = document.getElementById('mask'),
                    alertEl = document.getElementById('alert');
                if (this.captcha !== '') {
                    this.$http.post(common.isdev() + '/guide/receiveAward/0.htm', {
                        'userId': userId,
                        'mobile': mobile,
                        'captcha': captcha
                    })
                    .then(function (response) {
                        var someData = response.data;
                        if(someData.result != 0){
                            this.coupons = someData.obj;
                            registEl.style.display = 'none';
                            giftListEl.style.display = 'block';
                        } else {
                          this.alertContent = '验证码错误或者不是活动分享';
                          alertEl.setAttribute('style','display:block;');
                          maskEl.setAttribute('style','display:block;');
                        }
                    }, function (response) {

                    });
                }
            },
            setDownloadUrl: function(){
                var downloadUrl = '//cxb.chexiang.com/html/lead/download_cxb.html';
                //var hostName = '//www.chexiang.com';
                if (window.location.hostname.indexOf('sit') != -1){
                    downloadUrl = downloadUrl.replace('.chexiang.','.chexiangsit.');
                } else if (window.location.hostname.indexOf('pre') != -1){
                    //hostName = '//www.chexiangpre.com';
                  downloadUrl = downloadUrl.replace('.chexiang.','.chexiangpre.');
                }
                this.downloadUrl= downloadUrl;
            },
            alertHide: function(){
                var maskEl = document.getElementById('mask');
                var alertEl = document.getElementById('alert');
                var _showFlag = alertEl.style.display;

                if (_showFlag == 'block') {
                    alertEl.setAttribute('style','display:none;');
                    maskEl.setAttribute('style','display:none;');
                }
            },
            send(){
                //console.info(555);
            }
            /*getUserinfo: function () {
                var _this = this;
                lb.getUserInfo(function (data) {
                  var _uid = data.text.UID;
                  var _oldMobile = data.text.tel;
                  _this.oldMobile = _oldMobile;
                  console.info(_oldMobile);
                  console.info(_uid);
                });
            },*/
        },
        mounted: function () {
            this.windowOnload();
            this.windowResize();
            this.getShareInfo();
            this.setDownloadUrl();

            //打点
            common.ANA_AnalyticsScan();
        }
    }
</script>

